<template>
    <Popup class="tech-secret-agreement" v-model="showModal" position="bottom" :overlay="false">
        <div class="secert-title">充值金额免密支付服务协议</div>
        <div class="secert-content">
            <div class="content-paragraph">
                欢迎使用“充值金额免密支付”服务，“充值金额免密支付”服务由 <span class="text-bold">{{storeName}}</span>（以下简称“本商户”），依据本线上协议的相关约定向您提供。为了保障您的权益，请您确认在使用“充值金额免密支付”服务之前，已详细阅读本协议的所有内容（尤其是粗体字部分），一旦<span class="text-bold">您勾选同意《充值金额免密支付协议》，即表示您本人已阅读、充分理解并同意本协议的所有内容；同时您同意依照本协议的约定，授权所有需要您授权的内容</span>。本协议将构成您与本商户就“充值金额免密支付”服务所订立的有效合约。
            </div>
            <div class="content-paragraph">
                “充值金额免密支付”服务内容：<span class="text-bold">为便于您相关费用的支付，您在此同意并确认授权本商户：在与您的交易过程中，收到您确认下单的指令后，本商户将执行您的下单指令并直接在您的充值账户中进行订单金额的扣款</span>。
            </div>
            <div class="content-paragraph">
                您在此同意并确认，<span class="text-bold">您使用本服务的意思表示出自您的真实意愿；同时您对使用本服务过程中发出的指令的真实性及有效性承担全部责任，该指令视为您的真实意思表示且不可变更或撤销。您承诺，本商户依照您的指令进行操作的一切风险均由您承担</span>。
            </div>
            <div class="content-paragraph text-bold">
                您在此同意并确认，如因你的充值账户中余额不足导致您无法正常使用本服务的，本商户不承担由此造成的经济纠纷或违约责任。
            </div>
            <div class="content-paragraph">
                您在此同意并确认，“充值金额免密支付”服务是本商户为您提供的增值服务，是接受您的授权指令的执行方，对您发出指令的真实性和准确性不负有审查义务，<span class="text-bold">除非本商户未按照您本人授权的指令操作或执行指令错误，本商户将不对任何因本协议之履行而导致的您的任何直接损失和间接损失承担法律责任</span>。
            </div>
            <div class="content-paragraph">
                如因本商户未按照您本人授权的指令操作或执行指令错误的原因导致您在使用本服务的过程中产生损失的，本商户应承担相应赔偿责任。
            </div>
            <div class="content-paragraph">
                您在此同意并确认，在开通并使用充值金额免密支付服务的过程中，您应准确、真实、及时和完整提供或更新本商户要求的您的相关信息，否则因上述信息不准确、不真实、不及时和不完整而产生的一切经济纠纷或违约责任等全部由您本人承担。
            </div>
            <div class="content-paragraph text-bold">
                您在此同意并确认，本商户有权随时修改、修订或解释本协议的有关条款和您使用“充值金额免密支付服务”相关的各类协议、各项约定或服务使用规则，一旦上述内容发生变动，本商户将会通过公告方式告知您。如果您不同意本商户对上述内容所做的修改、修订或解释，您应立即停止使用本协议约定的“充值金额免密支付服务”。一旦您继续使用本协议约定“充值金额免密支付”服务的，视为您理解并接受本商户对上述内容的修改、修订或解释。
            </div>
            <div class="content-paragraph">
                您在此同意并确认，不会利用本服务从事任何非法的或违反本协议目的或者侵犯其他第三方权益的行为，否则本商户有权立即单方面终止提供本服务，并不承担任何责任。
            </div>
            <div class="content-paragraph">
                本协议自您<span class="text-bold">勾选同意《充值金额免密支付协议》之日起生效</span>，您依据本协议的约定而进行的全部授权亦同时生效；您的全部授权在本商户收到您本人递交的解除本协议的申请时终止；在终止之前本商户依照您本人的授权进行操作的一切风险均由您本人自行承担。
            </div>
            <div class="content-paragraph">
                您在此同意并确认，本协议的成立、生效、履行和解释，均适用中华人民共和国法律；法律无明文规定的，应适用通行的行业惯例和本商户制定的和您使用“充值金额免密支付服务”相关的各类协议、各项约定或服务使用规则。如因本协议的履行而导致的任何争议，您和本商户应友好协商解决；协商解决不成的，应提交本商户所在地有管辖权的人民法院诉讼解决。
            </div>
            <div class="block"></div>
        </div>
        <div class="btn-list">
            <Button class="tech-btn" type="default" size="large" @click="refuse">不同意</Button>
            <Button class="tech-btn" type="danger" size="large" @click="agree">同意</Button>
        </div>
        <GoBack :haveFooter="true" :isCustomer="true" @back="close" />
    </Popup>
</template>

<script>
import { Popup, Button } from 'vant';
import { mapState } from 'vuex';
import GoBack from './GoBack';
export default {
    name: 'SecretAgreement',
    components: {
        Popup,
        Button,
        GoBack,
    },
    props: {
        storeName: {
            type: String,
            default: '三千客商户',
        },
    },
    data() {
        return {
            showModal: false,
        };
    },
    methods: {
        show() {
            this.showModal = true;
        },
        close() {
            this.showModal = false;
        },
        refuse() {
            this.$emit('result', false);
            this.close();
        },
        agree() {
            this.$emit('result', true);
            this.close();
        },
    },
};
</script>

<style lang="less">
.tech-secret-agreement {
    width: 100%;
    height: 100vh;
    overflow: hidden;
    .secert-title {
        .font-size-md();
        .t-c();
        .m-v(@gap-md);
        color: @text-color;
    }
    .secert-content {
        .p-h(@gap-md);
        height: calc(100vh - 70px);
        .scroll-y();
        .content-paragraph {
            .font-size();
            color: @gray-darker;
            text-indent: 28px;
            .m-b(@gap-md);
        }
        .block {
            height: 70px;
            width: 100%;
        }
    }
    .text-bold {
        font-weight: bold;
    }
    .btn-list {
        background: @white;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        .flex();
        .tech-btn {
            flex: 1;
            border-radius: 0;
        }
    }
}
</style>
